<template>
	<div class="sidebar">
		<el-tabs 
			v-model="activeTab" 
			:tab-position="'left'" 
			style="height: 100%;"
			@tab-click="handleTabClick"
		>
			<el-tab-pane 
				v-for="menu in menuList" 
				:key="menu.id" 
				:name="menu.id"
			>
				<span slot="label" class="font_size15">
					<span :class="menu.icon"></span>
					{{ menu.label }}
				</span>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from '@vue/composition-api'

// 定义事件
const emit = defineEmits(['menu-change'])

// 菜单数据
const menuList = ref([
	{ id: 'print', label: '打印设置', icon: 'icon-print' },
	{ id: 'payment', label: '收款方式', icon: 'icon-payment' },
	{ id: 'delivery', label: '配送方式', icon: 'icon-delivery' },
	{ id: 'fee', label: '费用设置', icon: 'icon-fee' },
	{ id: 'calculate', label: '计算方式', icon: 'icon-calculate' }
])

// 当前激活的标签
const activeTab = ref('print')

// 处理标签切换
const handleTabClick = (tab) => {
	const selectedMenu = menuList.value.find(menu => menu.id == tab.name)
	if (selectedMenu) {
		emit('menu-change', selectedMenu)
	}
}

onMounted(() => {
	console.log('菜单组件已加载')
	const defaultMenu = menuList.value[0]
	emit('menu-change', defaultMenu)
})

</script>

<style scoped>
.sidebar {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

/* 图标样式 */
.icon-print::before {
	content: '🖨️';
	margin-right: 8px;
}

.icon-payment::before {
	content: '💳';
	margin-right: 8px;
}

.icon-delivery::before {
	content: '🚚';
	margin-right: 8px;
}

.icon-fee::before {
	content: '💰';
	margin-right: 8px;
}

.icon-calculate::before {
	content: '🧮';
	margin-right: 8px;
}

::v-deep .el-tabs__item {
	padding-left: 10px !important;
}
</style>